{% extends 'base.html' %}

{% block css %}
    <style>
        #resultArea { display: none; }
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
        }

        .modal-content {
            background-color: #2c2222;
            margin: 20% auto;
            padding: 6px;
            border: 1px solid #888;
            width: 7%;
            color: white;
            opacity: 0.6;
        }

    .col-xs-12 {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中，如果需要的话 */
    }

    #id_img {
        cursor: pointer; /* 改变光标样式 */
        width: 718px;
        height: 110px;
        border: 1px solid;
        background: #e7e7e7;
        border-radius: 10px;
    }


    </style>
{% endblock %}
{% block content %}
    <div class="container">
         <div class="panel panel-default">
            <div class="panel-heading">新建任务</div>
            <div class="panel-body">
                <form id="formAdd">
                    <div class="clearfix">
                        {% for field in form %}
                            <div class="col-xs-12">
                                <div class="form-group" style="position: relative;margin-bottom: 20px;">
{#                                    <label>{{ field.label }}</label>#}
                                    {{ field }}
                                    <span class="error-msg" style="color: red; position: absolute;"></span>
                                </div>
                            </div>
                        {% endfor %}
                        <div class="col-xs-12">
                            <button id="btnCommit" type="button" class="btn btn-success">提 交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div id="resultArea">
            <div class="clearfix">
                <div class="col-xs-6">
                    <div style="text-align: left; font-size: xx-large">识别结果:</div>
                </div>
                <div class="col-xs-6">
                    <button style="float: left;" type="button" onclick="copyContent()" class="btn btn-success">复制结果</button>
                </div>
            </div>
            <div class="result clearfix" style="height:auto;">
                <div class="col-xs-6">
                    <img id="resultImg" src="" style="width: 100%;" >
                </div>
                <div class="col-xs-6">
                    <textarea style="width: 100%;height: 500px;" id="resultText"></textarea>
                </div>
            </div>
        </div>
        <div id="myModal" class="modal">
            <div class="modal-content">
                <p id="modal-message" style="margin: auto;text-align: center;">复制成功！</p>
            </div>
        </div>
    </div>


    <div style="height: 300px"></div>
{% endblock %}

{% block js %}
    <script type="text/javascript">
        $(function(){
            bindBtnCommitEvent();
        })
        function replaceBrWithNewline(text) {
          return text.replace(/<br\s*\/?>/gi, '\n');
        }
        function bindBtnCommitEvent(){
            $('#btnCommit').click(function (){
                var formdata = new FormData($('#formAdd')[0])
                $.ajax({
                    url: '/ocr/',
                    type: 'post',
                    data: formdata,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(res){
                        if (res.status){

                            $('#formAdd')[0].reset();
                            document.getElementById('resultArea').style.display = 'block';
                            var img = document.getElementById('resultImg');
                            img.src = res.img_url;

                            let textForTextarea = replaceBrWithNewline(res.result);
                            document.getElementById('resultText').value = textForTextarea;

                        } else {
                            $.each(res.error, function(name, data){
                                $('#id_'+name).next().text(data[0])
                            })
                        }
                    }
                })
            })
        }


        const text = document.getElementById('resultText')
        const copyContent = async () => {
            try {
                await navigator.clipboard.writeText(text.value);
                console.log('Content copied to clipboard');
                const modal = document.getElementById('myModal');
                modal.style.display = 'block';
                setTimeout(() => {
                  modal.style.display = 'none';
                }, 400);
            } catch (err) {
                console.error('Failed to copy: ', err);

            }
        }




    </script>
{% endblock %}






